<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery实现漂亮的购物车</title>
  <link href="shopcart.css" rel="stylesheet">
</head>

<body>
  <div class="page-shopping-cart" id="shopping-cart">
    <h4 class="cart-title">我的购物清单</h4>
    <div class="cart-product-title clearfix">
      <!--{'check-true':isSelectAll}-->
      <div class="td-check fl"><span class="check-span fl check-all check-true"></span>全选</div>
      <div class="td-product fl">商品</div>
      <div class="td-num fl">数量</div>
      <div class="td-price fl">单价(元)</div>
      <div class="td-total fl">金额(元)</div>
      <div class="td-do fl">操作</div>
    </div>
    <div class="cart-product clearfix">
      <table>
        <tbody>
          <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="timg.png">
              <div class="product-info">
                <h6>iphone6s</h6>
                <p>品牌：iphone&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="1" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">2000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">2000</span>.00</p>
            </td>
            <td class="td-do">
              <a href="javascript:;" class="product-btn green">收藏</a>
              <a href="javascript:;" class="product-btn">移除</a>
            </td>
          </tr>
          <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="shoe.png">
              <div class="product-info">
                <h6>vans板鞋</h6>
                <p>品牌：vans&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="3" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">400.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">1200</span>.00</p>
            </td>
            <td class="td-do">
              <a href="javascript:;" class="product-btn green">收藏</a>
              <a href="javascript:;" class="product-btn">移除</a>
            </td>
          </tr>

          <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="pidai.png">
              <div class="product-info">
                <h6>皮带</h6>
                <p>品牌：lv&nbsp;&nbsp;产地：韩国</p>
                <p>配送仓储：广州仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="4" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">1000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">4000</span>.00</p>
            </td>
            <td class="td-do">
              <a href="javascript:;" class="product-btn green">收藏</a>
              <a href="javascript:;" class="product-btn">移除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cart-product-info">
      <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a>
      <a class="keep-shopping" href="#"><span></span>继续购物</a>
      <a class="btn-buy fr" href="javascript:;">结算</a>
      <p class="fr product-total">￥<span>7200.00</span></p>
      <p class="fr check-num">共<strong><span>3</span></strong>种商品总计(不含运费)：</p>
    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var productList = [{
      'pro_name': 'iphone6s', //产品名称
      'pro_brand': 'iphone', //品牌名称
      'pro_place': '美国', //产地
      'pro_depot': '上海仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './timg.png', //图片链接
      'pro_price': 2000,
      //单价
    },
    {
      'pro_name': 'vans板鞋', //产品名称
      'pro_brand': 'vans', //品牌名称
      'pro_place': '美国', //产地
      'pro_depot': '北京仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './shoe.png', //图片链接
      'pro_price': 400 //单价
    },
    {
      'pro_name': '皮带', //产品名称
      'pro_brand': 'lv', //品牌名称
      'pro_place': '韩国', //产地
      'pro_depot': '广州仓库', //所在仓库
      'pro_num': 3, //数量
      'pro_img': './pidai.png', //图片链接
      'pro_price': 1000 //单价
    }
  ];
  //全选
  $(".check-all").click(function () {
    event.stopPropagation;
    if ($(this).hasClass("check-true")) {
      $(".check-span").removeClass("check-true");
    } else {
      $(".check-span").addClass("check-true");
    }
  });
  //不完全选
  $("td>.check-span").click(function () {
    event.stopPropagation;
    if ($(this).hasClass("check-true")) {
      $(this).removeClass("check-true");
      $(".check-all").removeClass("check-true");
    } else {
      $(this).addClass("check-true");
    }

  })
  //删除所选商品
  $(".delect-product").click(function () {
    var a = $("td>.check-true");
    var bl = window.confirm("确认删除?");
    if (bl) {
      a.parent().parent().remove();
    }
  }
  )
  //移除
  $(".product-btn:not(.green)").click(function(){
    var bl= window.confirm("确认移除");
    if(bl){
      $(this).parent().parent().remove();
    }

  })
  //减
  $(".num-reduce").click(function(){
    var a = $(this).next().val();
    a--;
    $(this).next().val(a);
    if(a<0){
      $(this).next().val(0);
      alert("数量不能<0");
    }
    total($(this).next());
    totalAll();
  })
  //加
  $(".num-add").click(function(){
    var a = $(this).prev().val();
    a++;
    $(this).prev().val(a);
    total($(this).prev());
  })
  //金额
  function total(obj){
        var value = obj.val();
        var price = parseInt( obj.parent().parent().next().find("span").text());
        var total =obj.parent().parent().next().next().find("span");
        total.text(value * price);
  }
  //总计
  $(".btn-buy").click(function totalAll(){
    var allMoney = $(".product-total").find("span");
    var count = $(".check-num").find("span");
    var a = $("td>.check-true");
    count.text(a.length);
    var sum = 0;
    console.log(allMoney.text());
    a.each(function(){
      var b = $(this).parent().next().next().next().next().find("span").text(); 
      console.log(b);
        sum += parseInt(b) ;      
    })
   allMoney.text(sum);
  })
  //收藏
  $(".green").click(function(){
    var bl =  window.confirm("确认收藏?");
    var a = $(this).parent().parent();
    if(bl){
         a.remove();
    }
    var name = $(this).parent().parent().find("h6").text();
    var src = $(this).parent().parent().find("img").attr("src");
    for(var i = 0;i < productList.length; i++){
      if(productList[i].pro_img=='./'+src){
          localStorage.setItem(name, productList[i]);
        }
    }
  })
</script>

</html>